<template>
  <div>
    <el-dialog
      width="768px"
      title="机械臂控制"
      append-to-body
      :visible.sync="mechArmDialog"
      :before-close="armDialogCancle"
    >
      <div class="content">
        <div class="title">GoTo基准点</div>
        <div class="flex">
          <div class="label">选择基准点：</div>
          <div>
            <el-radio-group v-model="point">
              <el-radio :label="0">左前</el-radio>
              <el-radio :label="2" disabled>左后</el-radio>
              <el-radio :label="1">右前</el-radio>
              <el-radio :label="3" disabled>右后</el-radio>
            </el-radio-group>
          </div>
          <div class="goto cursor-pointer" @click="GoTo">GoTo</div>
        </div>
        <div class="title">手动控制</div>
        <div class="flex">
          <div class="label">速度：</div>
          <el-slider
            ref="slider"
            v-model="moveSpeed"
            :min="0"
            :max="10"
            class="arm-slider"
            show-tooltip
          ></el-slider>
        </div>
        <div class="control-type">
          <div class="flex">
            <div class="label">控制方式：</div>
            <div>
              <el-radio-group v-model="controlType">
                <el-radio :label="1">6轴控制</el-radio>
                <el-radio disabled :label="2">笛卡尔坐标</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="flex" style="font-size: 12px">
            <div
              class="btn-red"
              style="width: 44px; height: 28px; line-height: 28px"
              @click="generalStopClick"
            >
              停止
            </div>
            <div
              class="serch-btn"
              style="
                width: 44px;
                height: 28px;
                line-height: 28px;
                margin-left: 10px;
                margin-right: 66px;
              "
              @click="goZeroClick"
            >
              回零
            </div>
          </div>
        </div>
        <div>
          <el-table
            :data="tableData"
            style="margin-left: 80px; width: 80%"
            class="tabla"
          >
            <el-table-column prop="name" align="center" label="控制项">
            </el-table-column>
            <el-table-column prop="value" align="center" label="实时值">
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <img
                  src="@/assets/images/home/top-arrow.png"
                  class="cursor-pointer"
                  alt=""
                  @mousedown="shaftControl(scope.row, 'up')"
                  @mouseup="(e) => stopShaftControl(e, scope.row)"
                />
                <img
                  src="@/assets/images/home/down-arrow.png"
                  style="margin-left: 20px"
                  class="cursor-pointer"
                  alt=""
                  @mousedown="shaftControl(scope.row, 'down')"
                  @mouseup="(e) => stopShaftControl(e, scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <div
          class="reset-btn"
          style="margin-left: 15px"
          @click="armDialogCancle"
        >
          {{ $t("取消") }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  API_armStatus,
  API_armControl, //机械臂控制
  API_armGotoZero, //机械臂归零
  //机械臂控制
} from "@/api/robot/monitor";
export default {
  props: {
    mechArmDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      point: 0, //基准点
      moveSpeed: 8, //移动速度
      controlType: 1,
      tableData: [],
      getArmTimer: null, //获取机械臂状态实时值
    };
  },
  created() {
    this.getArmStatus(); //获取机械臂状态
    // document.ondragend = function (ev) {
    //   ev.preventDefault();
    //   // this.stopShaftControl();
    // };
  },
  mounted() {
    this.getArmTimer = setInterval(() => {
      this.getArmStatus();
    }, 1000);
  },
  methods: {
    /**停止 */
    generalStopClick() {
      API_armControl({
        cmd: "1X73",
        values: [this.moveSpeed],
      }).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success("停止机械臂运行命令发送成功！");
        }
      });
    },
    /**回零 */
    goZeroClick() {
      API_armGotoZero({
        cmd: "1X76",
        values: [this.moveSpeed],
      }).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success("机械臂归零命令发送成功！");
        }
      });
    },
    /**机械臂控制 */
    shaftControl(row, type) {
      API_armControl({
        cmd: type == "up" ? "1X71" : "1X72",
        values: [this.moveSpeed, row.id],
      }).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          // this.$message.success("控制机械臂命令发送成功！");
        }
      });
    },
    /**停止 机械臂控制 */
    stopShaftControl(e, row) {
      console.warn("e---", e);
      let ev = e || window.event;
      this.pauseEvent(ev);
      API_armControl({
        cmd: "1X73",
        values: [this.moveSpeed, row.id],
      }).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success("停止机械臂运行命令发送成功！");
        }
      });
    },
    /**任务弹确认 */
    GoTo() {
      this.$emit("GoTo", this.point, this.moveSpeed);
    },
    /**弹框取消 */
    armDialogCancle() {
      this.$emit("armDialogCancle");
    },
    /**获取机械臂状态 */
    getArmStatus() {
      API_armStatus()
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.jointPosition;
          }
        })
        .catch((err) => {});
    },
    /**解决松开失效问题 */
    pauseEvent(e) {
      if (e.stopPropagation) e.stopPropagation();
      if (e.preventDefault) e.preventDefault();
      e.cancelBubble = true;
      e.returnValue = false;
      return false;
    },
  },
  beforeDestroy() {
    clearInterval(this.getArmTimer);
    this.getArmTimer = null;
  },
};
</script>
<style lang="scss" scoped>
.arm-slider {
  width: 299px;
  margin-top: -8px;
}
// 弹框内部样式
.el-dialog {
  position: relative;
  font-size: 14px;
  .content {
    .title {
      width: 80px;
      margin-bottom: 23px;
      text-align: left;
      font-family: SourceHanSansSC-Bold, SourceHanSansSC;
      font-weight: bold;
      color: #ffffff;
    }
    .label {
      width: 84px;
      margin-bottom: 33px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      text-align: right;
      color: #a6acb1;
    }
    .goto {
      display: flex;
      width: 44px;
      height: 28px;
      margin-left: 24px;
      margin-top: -5px;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
      background: rgba(0, 209, 255, 0.3);
      border: 1px solid #00d1ff;
    }
    .flex {
      display: flex;
    }
  }
  .control-type {
    height: 40px;
    display: flex;
    justify-content: space-between;
  }
}
.tabla {
  img {
    width: 20px;
    height: 20px;
  }
}
::v-deep {
  /**单选框样式*/
  .el-radio {
    .el-radio__label {
      color: #fff;
    }
    .el-radio__input {
      margin-bottom: px(5);
      //选中时的样式
      &.is-checked {
        .el-radio__inner {
          //选中时小圆圈的的颜色
          background-color: #00d1ff;
          border-color: #00d1ff;
        }
        + .el-radio__label {
          //选中时字体的颜色
          color: #00d1ff !important;
        }
      }
    }
  }
  .el-table .el-table__header-wrapper th,
  .el-table .el-table__fixed-header-wrapper th {
    height: 32px;
  }
  .el-dialog__footer {
    display: flex;
    justify-content: center;
  }
  .el-dialog__body {
    padding: 15px 24px !important;
  }
}
::v-deep {
  .el-dialog:not(.is-fullscreen) {
    margin-top: 10vh !important;
    margin-left: 500px !important;
  }
  .el-dialog__header {
    border: 1px solid #33414c;
  }
  .el-dialog__title {
    font-size: 16px;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: bold;
    color: #ffffff;
  }
  .self {
    .el-table__body-wrapper {
      width: 100%;
      max-height: 531px;
      overflow: auto;
    }
  }
  .el-slider__bar {
    background: #ccf6ff;
  }
  .el-slider__button {
    border: solid 2px #ccf6ff;
  }
}
</style>
